<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>手机商城</title>
<!-- CSS -->
<!--<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
<link rel="stylesheet" href="{url:#css/materialize.min.css}" />
<link rel="stylesheet" href="{url:#css/flexslider.css}" type="text/css">
<link rel="stylesheet" href="{url:#css/me.css}" />
<link rel="stylesheet" href="{url:#css/iconfont.css}" />
<!-- JS -->
<script src="{url:#js/jquery-1.11.3.min.js}"></script>
<script src="{url:#js/materialize.min.js}"></script>
<script src="{url:#js/jquery.flexslider.js}"></script>
<script src="{url:#js/home/product_detail.js}"></script>
<script src="{url:#js/yang_check.js}"></script>

</head>
<body>
<!-- TitleBar 开始 -->
<div class="navbar-fixed custom-navbar">
  <nav>
    <div class="nav-wrapper red accent-4 valign-wrapper custom-navbar">
      <ul class="left" id="nav-btn-left">
        <li><a href="javascript:window.history.go(-1);"><i class="iconfont">&#xe63c;</i></a></li>
      </ul>
      <span class="title-bar-size center_align">商品详情</span>
      <ul class="right">
        <li>
        	<!-- 
        	<a><i class="iconfont">&#xe645;</i></a>
        	-->
        </li>
      </ul>
    </div>
  </nav>
</div>
<!-- TitleBar 结束 -->

<!-- 广告轮播 开始 -->
<div class="flexslider mgr-0 no-border">
  <ul class="slides">
  	{list:$items=$img_arr}
  		<li><img style="width:100%;height:250px;" src="{url:@$item}" /></li>
  	{/list}
  	<!-- 
    <li><img src="{url:#images/temp/1_1.jpg}" /></li>
    <li><img src="{url:#images/temp/2_2.jpg}" /></li>
    -->
  </ul>
</div>
<!-- 广告轮播 结束 -->

<!-- 商品基本信息 -->
<div class="product_detail">
	<p class="product_title">{echo:mb_substr($goods_obj['name'],0,20,'utf-8')}</p>
	<div class="product_price">
		<span class="now_price">{echo:Common::get_goods_sell_name($goods_obj['category_id'])} <span id='ss_sell_price'>{$goods_obj['sell_price']}</span></span>
		<!-- 
		<span class="rel_price"><s>￥{$goods_obj['market_price']}</s></span>
		-->
		<!-- 
		<span class="jf">积分: 450.00</span>
		-->
	</div>
	<div class="row other">
		<div class="col s4 other-1">卖家包邮</div>
		<div class="col s4 other-2">销量 {echo:Common::getGoodNumByGId($goods_obj['id'])|'0'}</div>
		<div class="col s4 other-3">库存 {$goods_obj['store_nums']} 件</div>
	</div>
	<div class="divider"></div>
	<div class="sel_num modal-trigger" href="#sel-modal">
		<h6 class="left-align" style="float:left" id="h6Spec">请选择规格</h6>
		<h6 class="right-align"><i class="iconfont" style="color:black">&#xe63f;</i></h6>	
	</div>
	<div class="divider"></div>
	
	<div class="product-img-text">
		<div class="title">
			<div class="col s4">商品详情 </div>
		</div>
		
		<div>
			<ul>
				{$goods_obj['content']}
			</ul>
		</div>
	</div>
</div>
<!-- 结束 -->


<!-- 购买操作栏 -->
<div class="buy-toolbar">
	<div class="divider"></div>
	<div class="row" style="height:49px;">
		<div class="col s2 bor">
			<i class="iconfont center-align" style="font-size:1.8em">&#xe61f;</i>
		</div>
		<div class="col s2 bor" id="div_attention">
			<i class="iconfont center-align" style="font-size:2.0em">&#xe647;</i>
		</div>
		
		<div class="col s4 add-cart" onclick="add_shop_car()">
			加入购物车
		</div>
		
		<div class="col s4 now-buy">
			<a id="lj_buy">立即购买</a>
		</div>
		
	</div>
</div>
<!-- 结束 -->

<!-- 选择规格对话框 -->
<div id="sel-modal" class="modal bottom-sheet">
    <div class="modal-content">
      <div class="sel-dialog-img">
	  	<img src="{url:@$goods_obj[img]}" width="80px" height="80px;"/>
	  </div>
	  
	  {if:empty($specAttrList)}
	  	<div style="margin-left:100px;">
	  	<span class="now_price">{echo:Common::get_goods_sell_name($goods_obj['category_id'])}￥{$goods_obj['sell_price']}</span>
		<br/>
		<span>库存: <span id="sp_store_nums">{$goods_obj['store_nums']}</span> 件</span>
		<br/>
		
	  </div>
	  {else:}
	  	<div style="margin-left:100px;">
	  	<span class="now_price">{echo:Common::get_goods_sell_name($goods_obj['category_id'])}￥ <span id="sp_sell_price"></span></span>
		<br/>
		<span>库存: <span id="sp_store_nums"></span>件</span>
		<br/>
		<span>已选: <span id="sp_specs"></span></span>
	  </div>
	  {/if}
	  
	  
	  <div style="clear:both;">
	  
	  	{list:items=$specAttrList}
	  		<div class="spec-group">
			<span class="title">{$item['name']}</span>
			<ul value="{$item['id']}" class="ul_spec_attr">
				{list:items=$item['values'] item=$it key=$j}
				<li value="{$it['id']}" index="{$j}">{$it['value']}</li>
				{/list}
			</ul>
		</div>
	  	{/list}
	  
	  	<!-- 
	  	<div class="spec-group">
			<span class="title">颜色分类</span>
			<ul>
				<li>黄色</li>
				<li class="selected">红色</li>
				<li>蓝色</li>
				<li>黑色</li>
			</ul>
		</div>
		
		<div class="spec-group">
			<span class="title">尺寸</span>
			<ul>
				<li class="selected">XL</li>
				<li>XXL</li>
				<li>XXXL</li>
				<li>XXXXL</li>
			</ul>
		</div>
		-->
		
		<div class="sel-num-line">
			<h6 class="left-align">购买数量</h6>
			<div class="right-align">
				<i class="iconfont add-dec" onclick="buy_do('-')">&#xe66a;</i>
				<span style="font-size:1.5em; margin-left:20px; margin-right:20px;" id="sp_buy_nums">1</span>
				<i class="iconfont add-dec" onclick="buy_do('+')">&#xe669;</i>
			</div>
		</div>
		<div class="divider" style="clear:both;"></div>
	  </div>
	  
    </div>
    <div class="modal-footer">
    	<span id="sp_msg" style="display:none;color:red;">请选择完整的规格</span>
      <!-- 
      <a  class=" modal-action modal-close waves-effect waves-green btn-flat" href="javascript:;" onclick="sure_buy()">确定</a>
      -->
      {if:empty($specAttrList)}
      	  <!-- 
          <a id="a_spec_sure_buy"  class=" modal-action modal-close waves-effect waves-green btn-flat" onclick="return sure_buy(this)">确定</a>
          -->
          <input id="btn_sure_buy" type="button" class=" modal-action modal-close waves-effect waves-green btn-flat" value="确定"/>
      {else:}
      	  <input id="btn_sure_buy" type="button" class=" modal-action modal-close waves-effect waves-green btn-flat" value="确定"/>
      	<!-- 
          <a id="a_spec_sure_buy"   class=" modal-action modal-close waves-effect waves-green btn-flat" onclick="sure_buy(this)">确定</a>
          -->
          <!-- 
          <input id="btn_sure_buy" type="button" class=" modal-action modal-close waves-effect waves-green btn-flat" disabled="disabled" value="确定"/>
          -->
          
      {/if}
    </div>
</div>
{list:items=$specAttrList}
	<input class="hid_spec" type="hidden" id="hid{$item[id]}" name="hid{$item[id]}" value="0" />
	
{/list}
<input type="hidden" name="hid_spec_key_value" id="hid_spec_key_value"/>

<input type="hidden" id="hid_spec_arr_json" value='{$specAttrValueList}'/>

<input type="hidden" id="hid_buy_nums" name="hid_buy_nums" value="1"/>
<!-- 规格是否为空 -->
<input type="hidden" id="hid_spec_is_null" name="hid_spec_is_null" value="0"/>

<!-- 在规格为空的时候，商品的goods_id -->
<input type="hidden" id="hid_goods_id" name="hid_goods_id" value="{$goods_obj['id']}" />

<!-- 在规格不为空的时候，是否已选择完整的规格 -->
<input type="hidden" id="hid_spec_is_all" name="hid_spec_is_all" value="0"/>

<!-- 在规格不为空的时候，选择products表的id -->
<input type="hidden" id="hid_product_id" name="hid_product_id" value="{$goods_obj['product_id']}"/>

<!-- 结束 -->
<script type="text/javascript">
/**
 * 添加购物车
 */
function add_shop_car()
{
	
	//规格是否为空
	var spec_is_null = $("#hid_spec_is_null").val();
	if(spec_is_null == 0)
	{
		
	}
	else if( spec_is_null == 1 )
	{
		var spec_is_all = $("#hid_spec_is_all").val();
		if( spec_is_all == 0 )
		{
			yang_alert('请选择完整的规格');
			return;
		}
	}

	var buy_nums   = $("#hid_buy_nums").val();
	var product_id = $("#hid_product_id").val();
	
	$.post("{url:/mobile/add_shopping_car}",{buy_nums:buy_nums,product_id:product_id},function(data){
		if(data['status']=='success')
	    {
		    yang_alert(data['msg']);
        }
        else
	    {
            yang_alert(data['msg']);
        }
    },'json');
	
	
}



/**
 * 购物数量++ --
 */
function buy_do( arg )
{
	var text = parseInt( $('#sp_buy_nums').text());
	if(arg == '+')
	{
		text += 1;
	}
	else if( arg == '-' )
	{
		text -= 1;
		if(text<=1)
		{
			text = 1;
		}
	}
	$("#sp_buy_nums").text( text );
	$("#hid_buy_nums").val( text );
}

function check_spec_key()
{
	var attr_nums = "{echo:count($specAttrList)}";
	var spec_key_value = $("#hid_spec_key_value").val();
	
	if(spec_key_value == '' || spec_key_value == undefined)
	{
		return false;
	}
	else
	{
		var arr = spec_key_value.split("-");
		if(arr.length != attr_nums)
		{
			return false;
		}
		else
		{
			return true;
		}
	}
}

function change_key()
{
	var s = '';
	$(".hid_spec").each(function(){
		//alert(typeof $(this).val());
		if($(this).val() == '0')
		{
		}
		else
		{
			s += "-"+$(this).val();
		}
	});

	//去掉第一个字母-
	var key = s.substr(1,s.length);
	
	$("#hid_spec_key_value").val( key )

	if( check_spec_key() )
	{
		//$("#a_spec_sure_buy").prop("class", " modal-action modal-close waves-effect waves-green btn-flat");
		//$("#btn_sure_buy").removeAttr("disabled");
		
		var attr_arr = $("#hid_spec_arr_json").val();
		attr_arr = eval("("+attr_arr+")");
		$("#sp_sell_price").text( attr_arr[key]['sell_price'] );
		$("#sp_store_nums").text( attr_arr[key]['store_nums'] );
		var ss = '';
		$("li.selected").each(function(){
			ss += $(this).text()+" ";
		});
		$("#sp_specs").text( ss );
		
		//表明已选取了完整的规格,用于提交订单时判断
		$("#hid_spec_is_all").val( 1 );
		
		//在规格不为空的时候，选择products表的id
		$("#hid_product_id").val( attr_arr[key]['id'] );

		$("#h6Spec").text( "已选择：" +ss );

		$("#ss_sell_price").text( attr_arr[key]['sell_price'] );
	}
	
}



function sure_buy(obj)
{
	/*
	if( !check_spec_key() )
	{
		alert('请选择完整的规格');
		return;
	}
	*/	
	
}
//2:10-4:26
$(function(){	
	
	$(".ul_spec_attr li").each(function(){
		$(this).click(function(){
			
			$(this).attr("class","selected");
			$(this).parent().children().not($(this)).removeAttr('class');

			var v = $(this).attr('value');
			var p_v = $(this).parent().attr('value');
			
			var s = p_v+":"+v;
			
			//var h_k_v = $("#hid_spec_key_value").val();

			$("#hid"+p_v).val( s );
			
			change_key();
		});
	});

	{if:empty($specAttrList)}
		$("#hid_spec_is_null").val(0);
	{else:}
		$("#hid_spec_is_null").val(1);
	{/if}




	$("#div_attention").click(function(){
		var goods_id = $("#hid_goods_id").val();
		if( goods_id != null || goods_id <= 0 )
		{
			$.post("{url:/mobile/attention_do}",{goods_id:goods_id},function(data){
				if(data['status']=='success')
			    {
				    yang_alert(data['msg']);
		        }
		        else
			    {
		            yang_alert(data['msg']);
		        }
		    },'json');
		}
	});


	$("#lj_buy").click(function(){
		//规格是否为空
		var spec_is_null = $("#hid_spec_is_null").val();
		if(spec_is_null == 0)
		{
			
		}
		else if( spec_is_null == 1 )
		{
			var spec_is_all = $("#hid_spec_is_all").val();
			if( spec_is_all == 0 )
			{
				yang_alert('请选择完整的规格');
				return;
			}
		}
		var buy_nums   = $("#hid_buy_nums").val();
		var product_id = $("#hid_product_id").val();
		document.location.href="{url:/mobile/sub_order}&json_str={'"+product_id+"':"+buy_nums+"}";
		
	});	
});
</script>
</body>
</html>
